<template>
    <div style="background-color:yellow">
        <h1>我是父组件,这个底色都是我，其他颜色的都是我的子组件</h1>
        <h2>1.注册局部组件</h2>
        <h4>注册组件第三部：在网页中展示</h4>
        <ButtonCounter/>
        <h2>2.使用kebab-case注册组件</h2>
        <button-counter></button-counter>
        <h3>同一个组件被多次调用时，各自的数据都是独立的</h3>
        <h2>3.注册全局组件</h2>
        <DoubleCounter></DoubleCounter>
        <h2>4.组件可以按组要重复调用</h2>
        <HelloView name="张三"/>
        <HelloView name="李四"/>
        <HelloView name="王五"/>
        <HelloView name="赵六"/>
        <h2>5.动态组件</h2>
        <h3>使用component实现动态组件，它允许开发人员在不同的场景下灵活地渲染不同的组件，具体应用场景，查阅教程项目四任务二</h3>
        <input type="radio" value="WeiXin" v-model='dengLu'>微信登录
        <input type="radio" value="Phone" v-model='dengLu'>手机登录
        <component :is="dengLu"></component>
        <h2>6.带缓存的导航组件</h2>
        <button @click="currentTab='TDao1'">冰淇淋</button>
        <button @click="currentTab='TDao2'">蛋糕</button>
        <button @click="currentTab='TDao3'">糖果</button>
    <!-- keep-alive表示可以缓存组件的状态-->
     <keep-alive>
        <component :is="currentTab"></component>
     </keep-alive>
     <h2>7.异步组件：可以保证系统的稳定性和响应</h2>
        <h3>内置组件，用来协调处理组件树种嵌套的异步依赖
            。它用两个插槽，一个是default插槽，一个是fallback插槽。
            default插槽中的内容是当前该插槽中的组件可以显示技术显示，
            不能显示的话就显示fallback中的内容。
        </h3>
        <Suspense>
            <template v-slot:default>
                <div>
                    <!--这里的组件是我们要显示的正常的组件，如果因为网络的原因无法加载，就显示fallback里的内容-->
                   <DelayConn/>
                </div>
            </template>
            <template v-slot:fallback>
                <div>
                    Loading...
                </div>
            </template>
        </Suspense>
     <h2>8.props实现父组件向子组件通信，通过$emit实现子组件向父组件传递</h2>
     <SonOne toSon="你现在有没有好好学习前端？" @score="handle"></SonOne>
     <h3>注意：无论数据传输是何种形式，传递的都是字符串，
        我们可以使用v-bind来动态绑定属性，实现那用变量来传递
     </h3>
     <h2>9.props对象用法</h2>
     <h3>可以为组件的props指定验证要求。
        例如指定数据类型，如果传递的数据类型不符合要求，
        会发出警告
     </h3>
     <SonTwo :name="name" :age="age" :sex="sex" :hobby="hobby"></SonTwo>
     <h2>10.props数据是单向的</h2>
     <h3>父组件的数据有可能也会传递给其他子组件，如果被
        其中一个子组件修改了数据，则会影响其他子组件
     </h3>
     <h3>如果子组件想要在自己的作用域里面修改父组件传递过来的
        数据，就要在子组件data中另外定义一个变量，引用父组件
        传递过来的props值
     </h3>
     给孩子一个大大的棒！<SonOne :wid='wid'></SonOne>
     <h2>11.通过$ref实现父组件与子组件的通讯</h2>
     <h3>$ref是vue提供的一个内置对象，拥有已使用ref属性并成功注册的所有元素和组件
        通过$ref可以直接访问DOM元素或者子组件实例，使得父子组件进行通信
     </h3>
     <button @click="sendMessage()">再和孩子说一句话</button>
     <SonOne ref="childRef"></SonOne>



     <br><br><br><br><br><br><br><br><br>
    </div>
</template>

<script>
//添加组件第一步，导入组件、
import ButtonCounter from '../components/ButtonCounter'
import HelloView from '../components/HelloView'
import WeiXin from '../components/WeiXin'
import Phone from '../components/Phone'
import TDao1 from '../components/TDao/TDao1'
import DelayConn from '../components/DelayConn'
import SonOne from '../components/SonOne'
import SonTwo from '../components/SonTwo'
export default{
    //添加组件第二步，注册组件
    components:{
        ButtonCounter,
        HelloView,
        WeiXin,
        Phone,
        TDao1,
        DelayConn,
        SonOne,
        SonTwo,
    },
    data() {
        return {
            dengLu:'',
            currentTab:'',
            name:'李四',
            age:19,
            sex:"女",
            hobby:['吃饭','睡觉','打豆豆'],
            wid:200,
        }
    },
    methods: {
        sendMessage(){
            this.$refs.childRef.receiveMessage("好孩子")
        },
        handle(val){
            alert('考了'+val+',不错')
        }
    },
}
</script>